/**
 * Created by Administrator on 2017/2/23.
 */
import React, {Component} from 'react';
import {View, StyleSheet, Image, Alert, Text} from  'react-native';
import {Kaede} from 'react-native-textinput-effects';
let dimension = require('Dimensions');
let totalWidth = dimension.get('window').width;
let leftWidth = totalWidth * 0.1;
let rightEnd = totalWidth * 0.8;
let Login = React.createClass({
    getInitialState: function () {
        return {
            userName: '',
            password: ''
        }
    },
    //完整格式,state可不要
    updateID: function (newText) {
        this.setState((state) => {
            return {
                userName: newText,
            };
        });
    },
    //简写格式
    updatePassword: function (password) {
        // this.setState(() => {
        //     return {
        //         password: newText,
        //     };
        // });
        this.setState({password})
    },
    onLogin (){
        Alert.alert('账号' + this.state.userName + "，密码：" + this.state.password);
    },
    render(){
        return (
            <View style={styles.contain}>
                <Kaede label={'账号'} borderColor={'#b76c94'}
                       style={styles.numberInputStyle}
                       onChangeText={(newText)=>this.updateID(newText)}/>
                <Kaede label={'密码'} borderColor={'#b76c94'} password={true}
                       style={styles.passwordInputStyle}
                       onChangeText={this.updatePassword}/>
                <Text style={styles.buttonStyle1} onPress={this.onLogin}>
                    登录
                </Text>
            </View>
        );
    }
})
const styles = StyleSheet.create({
    contain: {
        flex: 1,
        backgroundColor: '#292929',
        flexDirection: 'column'
    },
    numberInputStyle: {
        top: 150,
    },
    passwordInputStyle: {
        top: 170,
    },
    buttonStyle1: {
        top: 190,
        padding: 5,
        left: leftWidth,
        width: rightEnd,
        backgroundColor: '#06B9D1',
        fontSize: 21,
        textAlign: 'center'
    }
});
export default Login;